import { computed, ComputedRef } from 'vue';
import { EChartsOption } from 'echarts';
import { useAppStore } from '@/store';

// for code hints
// import { SeriesOption } from 'echarts';
// Because there are so many configuration items, this provides a relatively convenient code hint.
// When using vue, pay attention to the reactive issues. It is necessary to ensure that corresponding functions can be triggered, TypeScript does not report errors, and code writing is convenient.
interface optionsFn {
  (isDark: boolean): EChartsOption;
}

export default function useChartOption(sourceOption: optionsFn): {
  chartOption: ComputedRef<EChartsOption>;
} {
  const appStore = useAppStore();

  // 计算是否为暗黑模式
  const isDark = computed(() => appStore.theme === 'dark');

  // 根据主题动态生成图表配置，明确类型为 EChartsOption
  const chartOption = computed<EChartsOption>(() => {
    // 传入 isDark 的原始值（布尔值），而非 ComputedRef
    return sourceOption(isDark.value);
  });

  return {
    chartOption,
  };
}
